<!-- 加载 -->
<template>
    <div class="shape-circle">
        <span class="circle"></span>
        <span class="circle"></span>
        <span class="circle"></span>
    </div>
  
</template>
<script lang="ts">

</script>


<style lang="less" scoped>
.shape-circle{
        display: inline-block;
        background: white;
        border-radius: 5px;
        padding: 5px;
        border-top-left-radius: 0px;
       
    .circle{
        width:7px;
        float: left;
        height: 7px;
        border-radius: 50%;
        background: #777a8d;
        margin: 0 4px;
        animation: colorChange 1s linear infinite;

    }
    @keyframes colorChange {
        0%{
            background-color: #ffcc00;
        }
        33%{
            background-color: #ffcc00;
        }
        
        66.67%{
            background-color: #ffcc00;
        }
    }
    .circle:nth-child(1){
        animation-delay: 0s;
    }
    .circle:nth-child(2){
        animation-delay: 0.33s;
    }
    .circle:nth-child(3){
        animation-delay: 0.67s;
    }


}

</style>>
